<template>
  <el-dialog title="请选择用户"
             :visible.sync="selectDialogVisible"
             width="80%" @close="closeDialog">
    <div style="padding-bottom: 50px;">
      <el-card class="filter-container" shadow="never">
        <div>
          <i class="el-icon-search"></i>
          <span>筛选搜索</span>
          <el-button
                  style="float:right"
                  type="primary"
                  @click="handleSearchList()"
                  size="small">
            查询搜索
          </el-button>
          <el-button
                  style="float:right;margin-right: 15px"
                  @click="handleResetSearch()"
                  size="small">
            重置
          </el-button>
        </div>
        <div style="margin-top: 15px">
          <el-form :inline="true" :model="listQuery" size="small" label-width="140px">
            <el-form-item label="账号：">
              <el-input v-model="listQuery.username" class="input-width" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="昵称：">
              <el-input v-model="listQuery.nickName" class="input-width" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="手机号码：">
              <el-input v-model="listQuery.phone" class="input-width" placeholder="" clearable></el-input>
            </el-form-item>
            <el-form-item label="用户状态：">
              <el-select v-model="listQuery.flag" style="width:100%">
                <el-option label="无效" value="0"></el-option>
                <el-option label="有效" value="1"></el-option>
              </el-select>
            </el-form-item>

          </el-form>
        </div>
      </el-card>

      <div class="table-container">
        <el-table :data="selectList"
                  style="width: 100%;"
                  v-loading="selectListLoading" border>
          <el-table-column label="账号" align="center" prop="username"/>
          <el-table-column label="昵称" align="center" prop="nickName"/>
          <el-table-column label="手机号码" align="center" prop="phone"/>
          <el-table-column label="邮箱" align="center" prop="email"/>
          <el-table-column label="用户状态" align="center" prop="flag">
            <template slot-scope="scope">
              <el-tag type="danger" v-if="scope.row.flag == '0'">无效</el-tag>
              <el-tag type="primary" v-if="scope.row.flag == '1'">有效</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" align="center" prop="createTime"/>
          <el-table-column label="更新时间" align="center" prop="updateTime"/>

          <el-table-column label="操作" align="center" width="100">
            <template slot-scope="scope">
              <el-button size="mini" type="primary" @click="handleSelect(scope.row)">选择</el-button>
            </template>
          </el-table-column>

        </el-table>
      </div>
      <div class="pagination-container">
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                layout="total, sizes,prev, pager, next,jumper"
                :current-page.sync="listQuery.current"
                :page-size="listQuery.pageSize"
                :page-sizes="[5,10,15]"
                :total="total">
        </el-pagination>
      </div>
    </div>
  </el-dialog>
</template>

<script>
import {userPostRequire} from '@/api/user'

const defaultListQuery = {
    current: 1,
    pageSize: 10,
    username: undefined,
    nickName: undefined,
    phone: undefined,
    flag: undefined,
  }

  export default {
    name: "userSelect",
    props: {
      visible: {
        default: false
      }
    },
    data() {
      return {
        selectList: [],
        total: null,
        selectListLoading: false,
        selectDialogVisible: false,
        listQuery: this.$deepClone( defaultListQuery),
      }
    },
    watch:{
      visible(val){
        this.selectDialogVisible = val
        if(val){
          this.getList()
        }
      }
    },
    methods: {
      handleSizeChange(val) {
        this.listQuery.current = 1
        this.listQuery.pageSize = val
        this.getList()
      },
      handleCurrentChange(val) {
        this.listQuery.current = val
        this.getList()
      },
      getList() {
        this.selectListLoading = true
        userPostRequire('listPage', this.listQuery).then(response => {
          this.selectListLoading = false
          this.selectList = response.data.records
          this.total = response.data.total
        })
      },
      handleResetSearch() {
        this.listQuery = this.$deepClone( defaultListQuery)
      },
      handleSearchList() {
        this.listQuery.current = 1
        this.getList()
      },

      closeDialog(){
        this.selectDialogVisible = false
        this.$emit('close')
      },
      handleSelect(row) {
        this.$emit("onSelect",row)
        this.closeDialog()
      },
    }
  }
</script>
